<template>
  <el-card class="box-card">
    <div class="header">
      <el-input
        v-model="listQuery.jobName"
        placeholder="任务名称"
        style="width: 300px;"
        class="filter-item"
        @keyup.enter.native="submitQuery"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="submitQuery"
      >搜索
      </el-button>
      <el-button
        class="filter-item"
        icon="el-icon-delete"
        type="default"
        style="margin-left:0;"
        @click="clearQuery"
      >清空
      </el-button>
      <el-button
        v-waves
        class="filter-item"
        type="success"
        icon="el-icon-plus"
        @click="showCreateDialog"
      >新增定时任务
      </el-button>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="#" min-width="80px" align="center">
        <template slot-scope="{row}">
          <span class="link-type">{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务名称" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务分组" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.jobGroup }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="执行类" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.jobClassName }}</span>
        </template>
      </el-table-column>-->
      <el-table-column label="cron表达式" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.cronExpression }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务状态" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.triggerState }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="任务名称" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.oldJobName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务分组" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.oldJobGroup }}</span>
        </template>
      </el-table-column>-->
      <!-- <el-table-column label="描述" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.description }}</span>
        </template>
      </el-table-column>-->

      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        width="400px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row}">
          <el-button
            v-if="row.triggerState === 'PAUSED'||row.triggerState === 'COMPLETE'"
            size="mini"
            type="primary"
            icon="el-icon-caret-right"
            plain
            @click="resumeHandle(row.id)"
          >启动
          </el-button>
          <el-button
            v-if="row.triggerState === 'RUNNING'||row.triggerState === 'ACQUIRED'"
            size="mini"
            type="danger"
            icon="el-icon-video-pause"
            plain
            @click="pauseHandle(row.id)"
          >暂停
          </el-button>
          <el-button
            v-if="row.triggerState === 'COMPLETE'||row.triggerState === 'PAUSED'"
            type="success"
            icon="el-icon-view"
            size="mini"
            plain
            @click="showViewDialog(row.id)"
          >查看
          </el-button>
          <el-button
            v-if="row.triggerState === 'PAUSED'"
            type="primary"
            icon="el-icon-edit"
            size="mini"
            plain
            @click="showUpdateDialog(row.id)"
          >编辑
          </el-button>
          <el-button
            v-if="row.triggerState === 'COMPLETE'||row.triggerState === 'PAUSED'"
            type="danger"
            icon="el-icon-delete"
            size="mini"
            plain
            @click="deleteHandle(row.id)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="titleMap[dialogStatus]"
      :lock-scroll="true"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <div class="dialogBody">
        <el-scrollbar wrap-class="scrollbar-wrapper">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="80px"
            :disabled="!(dialogStatus ==='update' || dialogStatus ==='create')"
          >
            <el-row>
              <el-col :xs="24" :md="24">
                <el-form-item label="任务名称" prop="jobName">
                  <el-input v-model="form.jobName" placeholder="请输入任务名称" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="任务分组" prop="jobGroup">
                  <el-input v-model="form.jobGroup" placeholder="请输入任务分组" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="执行类" prop="jobClassName">
                  <el-input v-model="form.jobClassName" placeholder="请输入执行类" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="cron" prop="cronExpression">
                  <el-input v-model="form.cronExpression" placeholder="请输入cron表达式" />
                </el-form-item>
              </el-col>
              <el-col
                v-if="!(dialogStatus ==='update' || dialogStatus ==='create')"
                :xs="24"
                :md="24"
              >
                <el-form-item label="任务状态" prop="triggerState">
                  <el-input v-model="form.triggerState" placeholder="请输入任务状态" />
                </el-form-item>
              </el-col>
              <el-col
                v-if="!(dialogStatus ==='update' || dialogStatus ==='create')"
                :xs="24"
                :md="24"
              >
                <el-form-item label="之前名称" prop="oldJobName">
                  <el-input v-model="form.oldJobName" placeholder="请输入修改之前的任务名称" />
                </el-form-item>
              </el-col>
              <el-col
                v-if="!(dialogStatus ==='update' || dialogStatus ==='create')"
                :xs="24"
                :md="24"
              >
                <el-form-item label="之前分组" prop="oldJobGroup">
                  <el-input v-model="form.oldJobGroup" placeholder="请输入修改之前的任务分组" />
                </el-form-item>
              </el-col>
              <el-col :xs="24" :md="24">
                <el-form-item label="描述" prop="description">
                  <el-input v-model="form.description" placeholder="请输入描述" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-scrollbar>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button
          v-if="(dialogStatus ==='update' || dialogStatus ==='create')"
          type="primary"
          @click="saveHandle"
        >保存
        </el-button>
      </div>
    </el-dialog>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </el-card>
</template>
<script>
import {
  page,
  findById,
  save,
  deleteById,
  updateById,
  resumeById,
  pauseById,
  triggerById
} from '@/api/quartzJob'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

const jobState = {
  1: 'RUNNING',
  2: 'COMPLETE',
  3: 'PAUSED'
}

export default {
  name: 'SysQuartzJob',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 10,
        jobName: undefined
      },
      rules: {
        jobName: [
          { required: true, trigger: 'blur', message: '任务名称不能为空' }
        ],
        jobGroup: [
          { required: true, trigger: 'blur', message: '任务分组不能为空' }
        ],
        jobClassName: [
          { required: true, trigger: 'blur', message: '执行类不能为空' }
        ],
        cronExpression: [
          { required: true, trigger: 'blur', message: 'cron表达式不能为空' }
        ],
        triggerState: [
          { required: true, trigger: 'blur', message: '任务状态不能为空' }
        ],
        description: [
          { required: true, trigger: 'blur', message: '描述不能为空' }
        ]
      },
      dialogFormVisible: false,
      downloadLoading: false,
      titleMap: {
        update: '编辑',
        create: '新增',
        view: '查看'
      },
      dialogStatus: '',
      form: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    getList() {
      this.listLoading = true
      page(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    submitQuery() {
      this.listQuery.current = 1
      this.getList()
    },
    clearQuery() {
      this.listQuery.jobName = undefined
      this.submitQuery()
    },
    showCreateDialog() {
      this.resetForm()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.form = {}
    },
    showViewDialog(id) {
      this.resetForm()
      this.dialogStatus = 'view'
      findById(id).then(response => {
        this.form = response.data
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
      this.dialogFormVisible = true
    },
    showUpdateDialog(id) {
      this.resetForm()
      this.dialogStatus = 'update'
      findById(id).then(response => {
        this.form = response.data
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
      this.dialogFormVisible = true
    },
    deleteHandle(id) {
      const me = this
      this.$confirm('是否删除这条数据？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(id).then(() => {
          me.getList()
        })
      })
    },
    pauseHandle(id) {
      const me = this
      this.$confirm('是否暂停这个任务？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        pauseById(id).then(() => {
          me.getList()
        })
      })
    },
    resumeHandle(id) {
      const me = this
      this.$confirm('是否恢复这个任务？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        resumeById(id).then(() => {
          me.getList()
        })
      })
    },
    triggerHandle(id) {
      const me = this
      this.$confirm('是否启动这个任务？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        triggerById(id).then(() => {
          me.getList()
        })
      })
    },
    saveHandle() {
      const me = this
      me.$refs.form.validate(valid => {
        if (valid) {
          this.downloadLoading = true
          if (me.dialogStatus === 'create') {
            save(this.form).then(() => {
              this.listLoading = false
              me.dialogFormVisible = false
              me.getList()
            })
          } else {
            updateById(this.form).then(() => {
              this.listLoading = false
              me.dialogFormVisible = false
              me.getList()
            })
          }
        } else {
          return false
        }
      })
    },
    resetForm() {
      if (this.$refs.form !== undefined) {
        this.$refs.form.resetFields()
      }
    },
     handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  }
}
</script>

<style lang="scss" scoped>
  .box-card {
    height: 100%;
    margin: 10px 8px;
    padding: 0;
  }

  .header {
    margin-bottom: 10px;
  }

  .dialogBody {
    height: 400px;
    overflow: hidden;
  }

  .scrollbar-wrapper {
    overflow-x: hidden !important;
  }

  .el-scrollbar__bar.is-vertical {
    right: 0px;
  }

  .el-scrollbar {
    height: 100%;
  }
</style>
